<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>details</title>
	</head>
	<body>
		<!--
    用于创建一个可展开折叠的元件，用户可以从中检索其他附加的信息。
    用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
    内容对用户是不可见的，除非设置了 open 属性。

    <summary>元素作为一个<datails>元素的标题，该标题可以包含详细的信息，
    但是默认情况下不显示，需要单击才能显示详细信息，请参考上述示例：
    标签定义及使用说明：
    <summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。
    -->

		<h2>Product Details</h2>

		<details>
			<summary>Specification</summary>
			<p>Details about the product specifications go here...</p>
		</details>

		<details open>
			<summary>Reviews</summary>
			<p>Customer reviews and ratings go here...</p>
		</details>
	</body>
</html>
